<!DOCTYPE html>
<html lang="en">
<head>
	<#include "../static/top.ftl" >
    <link rel="stylesheet" href="/res/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/res/assets/css/jquery.webui-popover.min.css">
    <link rel="stylesheet" href="/res/assets/css/bootstrap-select.css">
    <link rel="stylesheet" href="../../res/libs/misc/datatables/datatables.min.css">
    <link rel="stylesheet" href="../../res/assets/css/bootstrap-table.css">
    <link rel="stylesheet" href="/res/libs/bower/chosen/chosen.min.css">
    <link rel="stylesheet" href="/res/assets/css/jqcloud.css">
</head>

<body class="menubar-left menubar-unfold menubar-light theme-primary">
<!--============= start main area -->

<!-- APP NAVBAR ==========-->



<#include "../static/header.ftl" >

<!--========== END app navbar -->

<!-- APP ASIDE ==========-->


<#include "../static/menu.ftl" >
<!--========== END app aside -->
<!-- navbar search -->

<!-- APP MAIN ==========-->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
        <#--筛选框-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label>起始时间</label>
                                        <div class="input-group date datepicker" id="start_datapicker"
                                             data-provide="datepicker"
                                             style="width: 70%">
                                            <input type="text" class="form-control" placeholder="时间" id="start_date"
                                                   style="min-width:180px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>结束时间</label>
                                        <div class="input-group date datepicker" data-provide="datepicker"
                                             style="width: 70%">
                                            <input type="text" class="form-control" placeholder="时间" id="end_date"
                                                   style="min-width:180px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>品类</label>
                                        <select class="form-control" id="cate_select" style="min-width:180px">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>品牌</label>
                                        <select class="form-control" id="brand_select" style="min-width:180px">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn rounded btn-default button_active" id="search">
                                            确认
                                        </button>
                                    </div>
                                </form>
                            </h4>
                        </header>
                    </div>
                </div>
            </div>

        <#--总览-->
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <div class="panel-body">
                            <div class="col-md-4 col-sm-6">
                                <div class="widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">销售额</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div class="widget-body p-t-lg">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6" style="padding:0 0;width:80px;height:80px;">
                                                <div style="width:100%;height:100%;
                                                            border-radius:50%;background-color: #ffe6e9;">
                                                    <div style="width:60px;height:60px;
                                                            border-radius:50%;background-color: #ff7a8b;
                                                                margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
                                                        <img style="width:50%;height:50%;background-color: #ff7a8b;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;" src="/res/assets/images/brand/销售额icon.png">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 col-md-6">
                                                <div class="clearfix m-b-md">
                                                    <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                        <span class="counter" data-plugin="counterUp" id="sales">- </span>元
                                                    </h3>
                                                </div>
                                                <h5 id="sales_mom">环比增长：- %</h5>
                                                <h5 id="sales_yoy">同比增长：- %</h5>
                                            </div>
                                        </div>
                                    </div><!-- .widget-body -->
                                </div><!-- .widget -->
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">客单数</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div class="widget-body p-t-lg">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6" style="padding:0 0;width:80px;height:80px;">
                                                <div style="width:100%;height:100%;
                                                            border-radius:50%;background-color: #ffe6e9;">
                                                    <div style="width:60px;height:60px;
                                                            border-radius:50%;background-color: #ff7a8b;
                                                                margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
                                                        <img style="width:50%;height:50%;background-color: #ff7a8b;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;" src="/res/assets/images/brand/客单.png">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 col-md-6">
                                                <div class="clearfix m-b-md">
                                                    <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                        <span class="counter" data-plugin="counterUp" id="tc">- </span>笔
                                                    </h3>
                                                </div>
                                                <h5 id="tc_mom">环比增长：- %</h5>
                                                <h5 id="tc_yoy">同比增长：- %</h5>
                                            </div>
                                        </div>
                                    </div><!-- .widget-body -->
                                </div><!-- .widget -->
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">店铺数</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div class="widget-body p-t-lg">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6" style="padding:0 0;width:80px;height:80px;">
                                                <div style="width:100%;height:100%;
                                                            border-radius:50%;background-color: #ffe6e9;">
                                                    <div style="width:60px;height:60px;
                                                            border-radius:50%;background-color: #ff7a8b;
                                                                margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
                                                        <img style="width:50%;height:50%;background-color: #ff7a8b;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;" src="/res/assets/images/brand/店铺.png">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 col-md-6">
                                                <div class="clearfix m-b-md">
                                                    <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                        <span class="counter" data-plugin="counterUp"
                                                              id="store_num">- </span>家
                                                    </h3>
                                                </div>
                                                <h5 id="store_num_mom">环比增长：- %</h5>
                                                <h5 id="store_num_yoy">同比增长：- %</h5>
                                            </div>
                                        </div>
                                    </div><!-- .widget-body -->
                                </div><!-- .widget -->
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="col-md-4 col-sm-6">
                                <div class="widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">店均客单数</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div class="widget-body p-t-lg">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6" style="padding:0 0;width:80px;height:80px;">
                                                <div style="width:100%;height:100%;
                                                            border-radius:50%;background-color: #ffe6e9;">
                                                    <div style="width:60px;height:60px;
                                                            border-radius:50%;background-color: #ff7a8b;
                                                                margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
                                                        <img style="width:50%;height:50%;background-color: #ff7a8b;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;" src="/res/assets/images/brand/平均.png">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 col-md-6">
                                                <div class="clearfix m-b-md">
                                                    <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                        <span class="counter" data-plugin="counterUp"
                                                              id="store_tc">- </span>笔
                                                    </h3>
                                                </div>
                                                <h5 id="store_tc_mom">环比增长：- %</h5>
                                                <h5 id="store_tc_yoy">同比增长：- %</h5>
                                            </div>
                                        </div>
                                    </div><!-- .widget-body -->
                                </div><!-- .widget -->
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="widget">
                                    <header class="widget-header">
                                        <h4 class="widget-title">老店店均客单数</h4>
                                    </header><!-- .widget-header -->
                                    <hr class="widget-separator">
                                    <div class="widget-body p-t-lg">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6" style="padding:0 0;width:80px;height:80px;">
                                                <div style="width:100%;height:100%;
                                                            border-radius:50%;background-color: #ffe6e9;">
                                                    <div style="width:60px;height:60px;
                                                            border-radius:50%;background-color: #ff7a8b;
                                                                margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;">
                                                        <img style="width:50%;height:50%;background-color: #ff7a8b;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;" src="/res/assets/images/brand/客户.png">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-12 col-md-6">
                                                <div class="clearfix m-b-md">
                                                    <h3 class="pull-left m-0 fw-500" style="color: #ba1b20">
                                                        <span class="counter" data-plugin="counterUp"
                                                              id="old_store_tc">- </span>笔
                                                    </h3>
                                                </div>
                                                <h5 id="old_store_tc_mom">环比增长：- %</h5>
                                                <h5 id="old_store_tc_yoy">同比增长：- %</h5>
                                            </div>
                                        </div>
                                    </div><!-- .widget-body -->
                                </div><!-- .widget -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="widget">
                    <div class="m-b-lg nav-tabs-horizontal">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active" id="tab-1_li">
                                <a href="#tab-1" aria-controls="tab-3" role="tab" data-toggle="tab">店铺汇总</a>
                            </li>
                            <li role="presentation" id="tab-2_li">
                                <a href="#tab-2" aria-controls="tab-1" role="tab" data-toggle="tab">评论汇总</a>
                            </li>
                            <li role="presentation" id="tab-3_li">
                                <a href="#tab-3" aria-controls="tab-2" role="tab" data-toggle="tab">菜品汇总</a>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content p-md">
                        <div role="tabpanel" class="tab-pane in active fade" id="tab-1">
                        <#--店铺情况  城市销售情况-->
                            <div class="row nav_body nav_body1">
                            <#-- 城市销售情况-->
                                <div class="col-md-12">
                                    <div class="widget-body" style="text-align: center;">
                                        <div id="table_div" style="padding: 0px 10px">
                                            <table data-detail-view="true" id="compareplatform1">

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            <#--店铺情况-->
                                <div class="col-md-12 col-sm-12">
                                    <div class="widget">
                                        <div class="widget-body" style="text-align: center;">
                                        <#--筛选框1-->
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="widget" style="box-shadow:none">
                                                        <header class="widget-header">
                                                            <h4 class="widget-title">
                                                                <form class="form-inline">
                                                                    <div class="form-group">
                                                                        <label>城市级别</label>
                                                                        <select class="form-control cityTier_select cityTier_select1">

                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label>城市</label>
                                                                        <select class="form-control city_select city_select1">

                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <button type="button" class="btn rounded btn-default button_active" id="btn_shop_info">
                                                                            确认
                                                                        </button>
                                                                    </div>
                                                                </form>
                                                            </h4>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div id="table_shop" style="padding:0px 20px">
                                                    <table id="shopTable" data-plugin="DataTable"
                                                           class="table table-striped"
                                                           cellspacing="0" width="90%">
                                                        <thead>
                                                        <tr role="row">
                                                            <th style="text-align: center;width: 30%;">店铺名</th>
                                                            <th style="text-align: center;">客单数(笔)</th>
                                                            <th style="text-align: center;">销售额(万元)</th>
                                                            <th style="text-align: center;">客单价(元)</th>
                                                            <th style="text-align: center;">客单数增长率%</th>
                                                            <th style="text-align: center;">店铺评分</th>
                                                            <th style="text-align: center;">配送速度(分钟)</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="shopTableBody">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <#--地图-->
                            <div class="row nav_body nav_body1">
                                <div class="col-md-12">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">品牌销售情况
                                                <div class="col-sm-4 pull-right" id="widget7">
                                                    <button type="button" class="pull-right btn rounded btn-default">
                                                        商圈容量
                                                    </button>&nbsp;
                                                    <button type="button" class="pull-right btn rounded btn-default">客单价
                                                    </button>&nbsp;
                                                    <button type="button"
                                                            class="pull-right btn rounded btn-default button_active">
                                                        销售额
                                                    </button>&nbsp;
                                                </div>
                                                <div class="col-sm-2 pull-right">
                                                    <input type="checkbox" id="ifShowShop"
                                                           style="vertical-align: middle">
                                                    <font style="font-size: 15px;vertical-align: middle;">显示店铺</font>
                                                    <button type="button" class="btn rounded btn-default button_active"
                                                            id="mapSearchBtn">
                                                        确认
                                                    </button>
                                                </div>
                                                <div class="col-sm-4 pull-right">
                                                    <input class="form-control" id="mapSearchInput" type="text"
                                                           placeholder="输入地址以查询...">
                                                </div>
                                            </h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body" id="mapDiv" style="height: 500px">

                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div>
                            </div>
                        <#--新闻-->
                            <div class="row nav_body nav_body1" id="hot_news">
                                <div class="col-md-12">
                                    <div class="widget">
                                        <header class="widget-header">
                                            <h4 class="widget-title">行业热点新闻</h4>
                                        </header><!-- .widget-header -->
                                        <hr class="widget-separator">
                                        <div class="widget-body">

                                            <div class="row m-b-lg">
                                                <div class="col-md-6" id="news"></div>
                                                <div class="col-md-6" id="news2"></div>
                                            </div>

                                            <!-- search results navigation -->
                                            <nav class="search-results-navigation">
                                                <ul class="pagination m-0">
                                                    <li>
                                                        <a href="javascript:void(0);" aria-label="Previous" style="color: #ba1b20">
                                                            <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
                                                        </a>
                                                    </li>
                                                    <li><a href="javascript:void(0);" style="color: #ba1b20">1</a></li>
                                                    <li>
                                                        <a href="javascript:void(0);" aria-label="Next" style="color: #ba1b20">
                                                            <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav><!-- END search-results-navigation -->


                                        </div><!-- .widget-body -->
                                    </div><!-- .widget -->
                                </div><!-- END column -->
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab-2">
                        <#--评论情况-月满意度趋势,满意度-->
                            <div class="row nav_body nav_body2">
                                <div class="col-md-12">
                                    <div class="widget">
                                        <div class="widget-body">
                                        <#--筛选框2-->
                                            <div class="row" style="text-align: center;">
                                                <div class="col-md-12">
                                                    <div class="widget" style="box-shadow:none">
                                                        <header class="widget-header">
                                                            <h4 class="widget-title">
                                                                <form class="form-inline">
                                                                    <div class="form-group">
                                                                        <label>城市级别</label>
                                                                        <select class="form-control cityTier_select2"
                                                                                id="cityTier_select2">

                                                                        </select>
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label>城市</label>
                                                                        <select class="form-control city_select2"
                                                                                id="city_select2">

                                                                        </select>
                                                                    </div>
                                                                </form>
                                                            </h4>
                                                        </header>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                            <#--月满意度趋势-->
                                                <div class="col-md-6">
                                                    <div class="widget">
                                                        <header class="widget-header">
                                                            <h4 class="widget-title">月满意度趋势图</h4>
                                                        </header><!-- .widget-header -->
                                                        <hr class="widget-separator">
                                                        <div class="widget-body"
                                                             style="text-align: center;height: 400px">
                                                            <div id="satisfaction_chart"
                                                                 style="height:380px;width:100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <#--满意度-->
                                                <div class="col-md-6">
                                                    <div class="widget">
                                                        <div class="widget-body"
                                                             style="text-align: center;height: 450px;">
                                                            <div id="table_shop">
                                                                <table data-detail-view="true"
                                                                       class="table table-hover" id="shop_satis">
                                                                    <thead style="border-bottom:3px solid #ba1b20">
                                                                    <tr role="row" style="border:none">
                                                                        <th style="text-align: center;"
                                                                            style="border:none">
                                                                            满意度
                                                                        </th>
                                                                        <th style="text-align: center;"
                                                                            style="border:none">
                                                                            <select
                                                                                    id="satisfaction_sort_by">
                                                                                <option value="DESC" selected>按满意度从高到低
                                                                                </option>
                                                                                <option value="ASC">按满意度从低到高</option>
                                                                            </select></th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="shop_satis_body">

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <#--评论情况-顾客反馈，词云图-->
                                            <div class="row">
                                            <#--顾客反馈-->
                                                <div class="col-md-6">
                                                    <div class="widget">
                                                        <header class="widget-header">
                                                            <h4 class="widget-title">顾客反馈</h4>
                                                        </header><!-- .widget-header -->
                                                        <hr class="widget-separator">
                                                        <div class="widget-body" style="text-align: center;height: 300px">
                                                            <#--筛选框2(8.10修改：去掉)-->
                                                            <div class="row" style="display: none">
                                                                <div class="col-md-12">
                                                                    <div class="widget" style="box-shadow:none">
                                                                        <header class="widget-header">
                                                                            <h4 class="widget-title">
                                                                                <form class="form-inline">
                                                                                    <div class="form-group" style="width: 35%;">
                                                                                        <label>城市</label>
                                                                                        <select id="city_name"
                                                                                                style="min-width:100px;width:76%">

                                                                                        </select>
                                                                                    </div>
                                                                                    <div class="form-group" style="width: 35%;">
                                                                                        <label>店铺</label>
                                                                                        <select class="form-control" id="shop_name"
                                                                                                style="min-width:100px;width:76%">

                                                                                        </select>
                                                                                    </div>
                                                                                </form>
                                                                            </h4>
                                                                        </header>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div id="table_shop" style="display: none">
                                                                <table id="customer_feedback1" data-plugin="DataTable"
                                                                       class="table table-striped"
                                                                       cellspacing="0" width="90%">
                                                                    <thead>
                                                                    <tr role="row">
                                                                        <th style="text-align: center;"></th>
                                                                        <th style="text-align: center;">讨论满意度占比</th>
                                                                        <th style="text-align: center;">正面喜好度%</th>
                                                                        <th style="text-align: center;">同比增长趋势%</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody id="customer_feedback_body1">

                                                                    </tbody>
                                                                </table>

                                                            </div>
                                                            <div id="customer_feedback" style="overflow-y:scroll;height:265px">
                                                                <table data-detail-view="true" id="compareplatform1">

                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <#--词云图-->
                                                <div class="col-md-6">
                                                    <div class="widget">
                                                        <header class="widget-header">
                                                            <h4 class="widget-title">词云图</h4>
                                                        </header><!-- .widget-header -->
                                                        <hr class="widget-separator">
                                                        <div class="widget-body" style="padding:0 0;height: 300px">
                                                            <div class="row" style="padding:0px 10px;">
                                                                <div class="col-md-6"style="padding:0 0;">
                                                                    <div id="word_cloud1" style="height: 300px;width:100%;">

                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6"style="padding:0 0;">
                                                                    <div id="word_cloud2" style="height: 300px;width:100%;">

                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="tab-3">
                        <#--产品-->
                            <div class="row nav_body nav_body3">
                                <div class="col-md-12">
                                    <div class="widget">
                                        <div class="widget-body">
                                            <select class="form-control" style="width:180px" id="category_selector">
                                                <option value="早餐">早餐</option>
                                                <option value="正餐">正餐</option>
                                            </select>
                                            <br>
                                            <table class="table">
                                                <thead style="border-bottom:3px solid #ba1b20">
                                                <tr>
                                                    <th>类型</th>
                                                    <th>产品名</th>
                                                <#--<th>图片</th>-->
                                                    <th>价格(元)</th>
                                                    <th>价格变化情况(%)</th>
                                                    <th>销售额(元)</th>
                                                </tr>
                                                </thead>
                                                <tbody id="product_table">

                                                </tbody>
                                            </table>
                                        </div><!-- .widget-body -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    <!-- APP FOOTER -->
<#----------------------------------模态框------------------------------------------->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">月满意度趋势图</h4>
                </div>
                <div class="modal-body">
                    <div id="satisfaction_model" style="height:300px;width:100%"></div>
                </div>
            </div>
        </div>
    </div>

<#include "../static/footer.ftl" >

</main>
<!--========== END app main -->
<script src="/res/assets/js/bootstrap-datepicker.js"></script>
<script src="/res/assets/js/bootstrap-select.js"></script>
<script src="../../res/assets/js/bootstrap-table.js"></script>

<script type="text/javascript"
        src='http://webapi.amap.com/maps?v=1.4.3&key=9fa8c62b85a987698a515fbddee8efa7&&plugin=AMap.ToolBar'></script>
<script src="/res/assets/js/jquery.webui-popover.min.js"></script>
<script type="text/javascript" src='../res/assets/js/heatmap.js'></script>
<script type="text/javascript" src="/res/assets/js/jqcloud-1.0.4.min.js"></script>
<script>
    var CATE_SELECT;
    var BRAND_SELECT;
    var CATE_BRAND;
    var widget7Btn = $("#widget7 button");
    var heatMap;
    var mapIndex = 2;
    var mapMarker = [];
    var colorArray = ['#ffcd96;', '#97ffa2;', '#00bcff;'];
    var capacityObj = {lng: -1, lat: -1};
    var satisfaction_chart;
    var satisfaction_model;
    //母表数据（ajax返回结果,需排序） 城市级别，城市 级联 暂时使用城市销售情况的表格里的数据
    var rowData = null;
    //子表数据（ajax返回结果,需排序）
    var subRowData = null;

    $(document).ready(function () {
        var username = '${user_name}';
        $("#userName").html(username);
        $(".app-menu li").each(function () {
            $(this).removeAttr("class");
        });
        $(".app-menu li a").each(function () {
            $(this).removeAttr("style");
        });
        $("#menu_brand").attr("class", "active");
        $("#menu_brand a").attr("style", "color: #ba1b20");

        $("#nav_bar").append("<li>\n" +
                "                    <a class=\"page-title hidden-menubar-top hidden-float\" style='color: white'>/品牌分析</a>\n" +
                "                </li>");

        $('.datepicker').datepicker({
            format: 'yyyy-mm',
            startView: 1,
            todayHighlight: true,
            maxViewMode: 'years',
            minViewMode: 'months',
            endDate: new Date().Format('yyyyMM')
        });

        CATE_SELECT = $("#cate_select");
        BRAND_SELECT = $("#brand_select");

        var toolBar = new AMap.ToolBar({
            visible: true
        });
        var map = new AMap.Map('mapDiv', {
            resizeEnable: true,
            zoom: 16,
            center: [121.45, 31.22],
            zoomEnable: true,
            dragEnable: true,
            zooms: [3, 18]
        });
        map.addControl(toolBar);
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
            var autoOptions = {
                city: 310115, //城市，默认全国
                input: "mapSearchInput"//使用联想输入的input的id
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                city: '上海',
                map: map
            });
            AMap.event.addListener(autocomplete, "select", function (e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name, function () {
                    try {
                        map.setZoomAndCenter(15, [e.poi.location.lng, e.poi.location.lat]);
                    } catch (e1) {
                        map.setCity(e.poi.adcode);
                    }
                    autoOptions.city = e.poi.adcode;
                    generateHeatMap(mapIndex);
                });
            });
            //对mapBrandSelect/mapSearchBtn元素进行监听，当此元素改变/点击时，触发地图变化的操作
            AMap.event.addDomListener(document.getElementById("mapSearchBtn"), "click", function (e) {
                generateHeatMap(mapIndex);
            });
        });

        getLatestMonth();
        getSubcateBrandName();
        init();

        widget7Btn.click(function () {
            var ele = $(this);
            //激活点击的按钮，取消激活其他按钮
            ele.addClass('button_active');
            var eleHtml = ele.html().replace(/\s+/g, "");
            widget7Btn.each(function () {
                if (!ele.is($(this))) {
                    $(this).removeClass('button_active');
                }
            });
            //判断方法对应的参数
            if (eleHtml === '客单价') {
                mapIndex = 1;
                generateHeatMap(mapIndex);
            } else if (eleHtml === '销售额') {
                mapIndex = 2;
                generateHeatMap(mapIndex);
            } else {
                mapIndex = 3;
                generateHeatMap(mapIndex);
            }
        });

        $("#search").click(function () {
            $("#sales").html("- ");
            $("#tc").html("- ");
            $("#store_num").html("- ");
            $("#store_tc").html("- ");
            $("#sales_mom").html("- ");
            $("#sales_yoy").html("- ");
            $("#tc_mom").html("- ");
            $("#tc_yoy").html("- ");
            $("#store_num_mom").html("- ");
            $("#store_num_yoy").html("- ");
            $("#store_tc_mom").html("- ");
            $("#store_tc_yoy").html("- ");

            var startMonth = $("#start_date").val();
            var endDate = $("#end_date").val();
            var cateName = CATE_SELECT.val();
            var brandName = BRAND_SELECT.val();
            var category=$("#category_selector").val();
            $("#mapSearchInput").val('');
            //getCityTierName();
            map.clearMap();
            mapMarker = [];
            //清空热力图
            try {
                heatMap.setDataSet({
                    max: 0,
                    data: []
                });
            } catch (e) {
            }
            $("#ifShowShop").prop("checked", false);
            cleanButtonStatus1(widget7Btn);
            //获取概览增长率
            getBrandOverviewResultRate(startMonth, endDate, cateName, brandName);
            //获取老店信息
            getBrandOverviewOldStore(startMonth, endDate, cateName, brandName);
            //生成城市销售情况的表格
            buildTable(brandName, cateName, startMonth, endDate);
            //生成产品表格
            buildProductTable(startMonth, endDate, brandName,category);
            //评论汇总-月满意度趋势(总体)
            satisfactionChartInit()
            //评论汇总-月满意度趋势(店铺) 表格
            satisfactionTableInit()
            //评论汇总-词云图
            getWordCloud()
            //顾客反馈
            initCities();
            //新闻
            getbrandnews(startMonth,endDate,brandName);

        });
        $("#btn_shop_info").click(function (){
            initCityShopTable()
        });


        function init() {
            CATE_SELECT.val('西式快餐');
            var nowCate = CATE_SELECT.val();
            BRAND_SELECT.html("");
            var tmpBrandList = CATE_BRAND[nowCate];
            tmpBrandList.forEach(function (value, index) {
                BRAND_SELECT.append("<option value='" + value + "'>" + value + "</option>");
            });
            BRAND_SELECT.val('肯德基');
            var startMonth = $("#start_date").val();
            var endDate = $("#end_date").val();
            var cateName = CATE_SELECT.val();
            var brandName = BRAND_SELECT.val();
            var category = $("#category_selector").val();

            getBrandOverviewResultRate(startMonth, endDate, cateName, brandName);
            getBrandOverviewOldStore(startMonth, endDate, cateName, brandName);
            buildTable(brandName, cateName, startMonth, endDate);
            buildProductTable(startMonth, endDate, brandName,category);
            getbrandnews(startMonth,endDate,brandName);
            // customer_feedback(startMonth, endDate, brandName,"上海","上海肯德基宅急送沪太店")
        }

        function cleanButtonStatus1(ele) {
            $(ele).each(function () {
                var eleHtml = $(this).html().replace(/\s+/g, "");
                if (eleHtml === '销售额') {
                    $(this).addClass('button_active');
                } else {
                    $(this).removeClass('button_active');
                }
            })
        }

        CATE_SELECT.change(function () {
            BRAND_SELECT.html("");
            var nowCate = CATE_SELECT.val();
            var tmpBrandList = CATE_BRAND[nowCate];
            tmpBrandList.forEach(function (value, index) {
                BRAND_SELECT.append("<option value='" + value + "'>" + value + "</option>");
            });
        });

        var startMonth = $("#start_date").val();
        var endDate = $("#end_date").val();
        var cateName = CATE_SELECT.val();
        var brandName = BRAND_SELECT.val();
        //buildTable(brandName, cateName, startMonth, endDate);//已在init()中处理了

        $("#ifShowShop").change(function () {
            mapMarker.forEach(function (value) {
                if (value.status === 1) {
                    value.status = 0;
                    value.marker.hide();
                } else {
                    value.status = 1;
                    value.marker.show();
                }
            })
        });


        //根据中心点坐标生成热力图
        function generateHeatMap(index) {
            mapMarker = [];
            map.clearMap();

            map.plugin(["AMap.Heatmap"], function () {
                //初始化heatmap对象
                if (typeof heatMap === 'undefined') {
                    heatMap = new AMap.Heatmap(map, {
                        radius: 30, //给定半径
                        opacity: [0, 0.9],
                        gradient: {
                            0.2: '#1bff13',
                            0.5: '#279eff',
                            0.8: '#ffc83e',
                            0.9: '#ff7a22',
                            1.0: '#ff2825'
                        }
                    });
                }
                //清空热力图
                heatMap.setDataSet({
                    max: 0,
                    data: []
                });
            });

            var points = [];
            var max = 0;
            var infoWindow = new AMap.InfoWindow({
                closeWhenClickMap: true,
                isCustom: true,
                offset: new AMap.Pixel(0, -30)
            });

            var bounds = map.getBounds();
            var max_lng = bounds.northeast.lng;
            var min_lng = bounds.southwest.lng;
            var max_lat = bounds.northeast.lat;
            var min_lat = bounds.southwest.lat;

            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var brandName = $("#brand_select").val();
            var subCatName = $("#cate_select").val();

            if (brandName === null || startMonth === null || endMonth === null || subCatName === null) {
                return;
            }

            //商圈容量数据暂无，暂时处理
            if (index === 3) {
                var lng, lat;
                if (capacityObj.lng === -1 && capacityObj.lat === -1) {
                    lng = min_lng + (max_lng - min_lng) / 2;
                    lat = min_lat + (max_lat - min_lat) / 2;
                } else {
                    lng = capacityObj.lng;
                    lat = capacityObj.lat;
                }

                $.ajax({
                    type: "GET",
                    url: "/service/data/get_brand_map_overview_result_by_capacity?" +
                    "start_month=" + startMonth + "&end_month=" + endMonth
                    + "&brand_name=" + encodeURIComponent(brandName) + "&subcat_name=" + encodeURIComponent(subCatName)
                    + "&lng=" + lng + "&lat=" + lat,
                    success: function (res) {
                        if (res.code === "suc") {
                            var realData = res.data;
                            var checked = 1, visivle = true;
                            var otherColor = [];

                            $("#ifShowShop").prop("checked", true);
                            for (var i = 0; i < realData.length; i++) {
                                var marker_icon = '';
                                var shopInfo = "";

                                //如果是指定的店铺，则用对应的颜色，否则从颜色数组里取一个，相同品牌用相同的颜色
                                if (realData[i].brand === '肯德基') {
                                    marker_icon = "<div class='kfc_pushpin'></div>";
                                } else if (realData[i].brand === '必胜客') {
                                    marker_icon = "<div class='ph_pushpin'></div>";
                                } else if (realData[i].brand === '必胜宅急送') {
                                    marker_icon = "<div class='phd_pushpin'></div>";
                                } else if (realData[i].brand === '麦当劳') {
                                    marker_icon = "<div class='mcd_pushpin'></div>";
                                } else {
                                    //先看此品牌之前是否取到过，若取到，则一定设置过颜色，则取此颜色即可
                                    var colorIndex = $.inArray(realData[i].brand, otherColor);
                                    if (colorIndex === -1) {
                                        //如果不存在，则先放入品牌数组，说明此品牌被取到过了
                                        otherColor.push(realData[i].brand);
                                        //然后根据品牌数组的index取颜色,由于限制了最多选项个数，则颜色的最多个数与限制的选项数相同
                                        colorIndex = $.inArray(realData[i].brand, otherColor);
                                    }
                                    var color = colorArray[colorIndex];
                                    marker_icon = "<div style='width: 18px;\n" +
                                            "        height: 18px;\n" +
                                            "        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;\n" +
                                            "        transform: rotate(135deg);\n" +
                                            "        background-color: " + color + "\n" +
                                            "        border-color: #888886;\n" +
                                            "        border-style: solid;\n" +
                                            "        border-width: 2px;'></div>";
                                }
                                shopInfo = "品牌：" + realData[i].brand + "<br>店名：" + realData[i].storeName;
                                var marker = new AMap.Marker({
                                    content: marker_icon,
                                    position: [realData[i].longitude, realData[i].latitude],
                                    visible: visivle,
                                    extData: realData[i].storeID
                                });
                                marker.content = shopInfo;
                                marker.on('mouseover', markerMouseOver);
                                marker.setMap(map);

                                var markerObj = {
                                    status: checked,//图钉是否显示，1：显示，0，隐藏
                                    marker: marker
                                }
                                mapMarker.push(markerObj);
                            }

                            function markerMouseOver(e) {
                                infoWindow.setContent("<div class='widget' " +
                                        "style='opacity: 0.86;background-color: #565656'>" +
                                        "<div class='widget-body'>" +
                                        "<p class='text-muted' style='color: white'>" + e.target.content + "</p>\n" +
                                        "</div></div>");
                                infoWindow.open(map, e.target.getPosition());
                            }
                        }
                    }
                });
            } else {
                $.ajax({
                    type: "GET",
                    url: "/service/data/get_brand_map_overview_result?start_month=" + startMonth + "&end_month=" + endMonth
                    + "&brand_name=" + encodeURIComponent(brandName)
                    + "&subcat_name=" + encodeURIComponent(subCatName)
                    + "&max_lng=" + max_lng + "&min_lng=" + min_lng + "&max_lat=" + max_lat + "&min_lat=" + min_lat,
                    success: function (res) {
                        if (res.code === "suc") {
                            var realData = res.data;
                            var otherColor = [];
                            for (var i = 0; i < realData.length; i++) {
                                var val = "";
                                if (index === 1) {
                                    val = realData[i].storeTA;
                                } else if (index === 2) {
                                    val = realData[i].storeSales;
                                }
                                max = Math.max(max, val);
                                var point = {
                                    lng: realData[i].longitude,
                                    lat: realData[i].latitude,
                                    count: val
                                }
                                points.push(point);
                            }
                            heatMap.setDataSet({
                                max: max,
                                data: points
                            });

                            var checked = 1, visivle = true;
                            if ($("#ifShowShop").prop('checked') === false) {
                                checked = 0;
                                visivle = false;
                            }

                            for (var i = 0; i < realData.length; i++) {
                                var marker_icon = '';
                                var marker_val = "";
                                var marker_title = "";
                                var shopInfo = "";
                                if (index === 1) {
                                    marker_val = realData[i].storeTA;
                                    marker_title = "客单价：";
                                } else if (index === 2) {
                                    marker_val = realData[i].storeSales;
                                    marker_title = "销售额：";
                                }

                                if (realData[i].brand === '肯德基') {
                                    marker_icon = "<div class='kfc_pushpin'></div>";
                                } else if (realData[i].brand === '必胜客') {
                                    marker_icon = "<div class='ph_pushpin'></div>";
                                } else if (realData[i].brand === '必胜宅急送') {
                                    marker_icon = "<div class='phd_pushpin'></div>";
                                } else if (realData[i].brand === '麦当劳') {
                                    marker_icon = "<div class='mcd_pushpin'></div>";
                                } else {
                                    var colorIndex = $.inArray(realData[i].brand, otherColor);
                                    if (colorIndex === -1) {
                                        otherColor.push(realData[i].brand);
                                        colorIndex = $.inArray(realData[i].brand, otherColor);
                                    }
                                    var color = colorArray[colorIndex];
                                    marker_icon = "<div style='width: 18px;\n" +
                                            "        height: 18px;\n" +
                                            "        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;\n" +
                                            "        transform: rotate(135deg);\n" +
                                            "        background-color: " + color + "\n" +
                                            "        border-color: #888886;\n" +
                                            "        border-style: solid;\n" +
                                            "        border-width: 2px;'></div>";
                                }
                                shopInfo = "品牌：" + realData[i].brand + "<br>店名：" + realData[i].storeName;
                                var marker = new AMap.Marker({
                                    content: marker_icon,
                                    position: [realData[i].longitude, realData[i].latitude],
                                    visible: visivle,
                                    extData: realData[i].storeID
                                });
                                marker.content = shopInfo
                                        + "<br>" + marker_title + formatNum(marker_val.toFixed(2)) + " 元";
                                marker.on('mouseover', markerMouseOver);
                                // marker.on('click', function markerClick(e) {
                                //     window.open("/product?sid=" + e.target.F.extData);
                                // });
                                marker.setMap(map);

                                var markerObj = {
                                    status: checked,//图钉是否显示，1：显示，0，隐藏
                                    marker: marker
                                }
                                mapMarker.push(markerObj);
                            }

                            function markerMouseOver(e) {
                                infoWindow.setContent("<div class='widget' " +
                                        "style='opacity: 0.86;background-color: #565656'>" +
                                        "<div class='widget-body'>" +
                                        "<p class='text-muted' style='color: white'>" + e.target.content + "</p>\n" +
                                        "</div></div>");
                                infoWindow.open(map, e.target.getPosition());
                            }

                            // function markerClick(e) {
                            //     infoWindow.setContent(e.target.content);
                            //     infoWindow.open(map, e.target.getPosition());
                            // }
                        }
                    }
                });
            }
        }

        //获取最新数据的月份
        function getLatestMonth() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_latest_month",
                async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            defaultMonth = res.data.yearMonth.toString().substring(0, 4)
                                    + "-" + res.data.yearMonth.toString().substring(4, 6);
                            $('.datepicker').datepicker('update', defaultMonth);
                            $("#start_datapicker").datepicker('update', res.data.yearMonth.toString().substring(0, 4) + "-01");
                        } catch (e) {
                        }
                    }
                }
            });
        }

        //获取城市等级和城市名的级联关系
        function getSubcateBrandName() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_top_subcate_brand_name",
                async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            CATE_BRAND = res.data;
                            CATE_SELECT.html("");
                            BRAND_SELECT.html("");
                            var tmpCateList = CATE_BRAND.sub_cate;

                            tmpCateList.forEach(function (value, index) {
                                CATE_SELECT.append("<option value='" + value + "'>" + value + "</option>");
                            });
                            var tmpBrandList = CATE_BRAND[CATE_BRAND.sub_cate[0]];
                            tmpBrandList.forEach(function (value, index) {
                                BRAND_SELECT.append("<option value='" + value + "'>" + value + "</option>");
                            });
                        } catch (e) {
                        }
                    }
                }
            });
        }
        function getBrandOverviewOldStore(startMonth, endDate, cateName, brandName) {
            $.get("/service/data/getBrandOverviewResultofOldStore",
                    {
                        start_month: startMonth,
                        end_month: endDate,
                        subcate: cateName,
                        brand_name: brandName
                    }, function (res) {
                        if (res.code === "suc") {
                            var up = "<i class='glyphicon glyphicon-arrow-up' style='color: #21dd21'></i>";
                            var down = "<i class='glyphicon glyphicon-arrow-down' style='color: #ff0000'></i>";
                            var returnData = res.data;
                            var storeTCMom = returnData.storeTCMoM >= 0
                                    ? fitNum((returnData.storeTCMoM * 100).toFixed(decimals_num)) + "%" + up
                                    : fitNum((returnData.storeTCMoM * 100).toFixed(decimals_num)) + "%" + down;
                            var storeTCYoy = returnData.storeTCYoY >= 0
                                    ? fitNum((returnData.storeTCYoY * 100).toFixed(decimals_num)) + "%" + up
                                    : fitNum((returnData.storeTCYoY * 100).toFixed(decimals_num)) + "%" + down;
                            $("#old_store_tc").html(fitNum(parseInt(returnData.storeTC).toFixed(decimals_num)));
                            $("#old_store_tc_mom").html("环比增长：" + storeTCMom);
                            $("#old_store_tc_yoy").html("同比增长：" + storeTCYoy);
                        }
                    }
            );
        }

        //获取概览增长率
        function getBrandOverviewResultRate(startMonth, endMonth, cateName, brandName) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_brand_overview_result_rate?start_month=" + startMonth + "&end_month=" + endMonth
                + "&brand_name=" + encodeURIComponent(brandName) + "&subcat_name=" + encodeURIComponent(cateName),
                success: function (res) {
                    if (res.code === "suc") {
                        var returnData = res.data;
                        var up = "<i class='glyphicon glyphicon-arrow-up' style='color: #21dd21'></i>";
                        var down = "<i class='glyphicon glyphicon-arrow-down' style='color: #ff0000'></i>";
                        var salesMom = returnData.salesmom >= 0
                                ? fitNum((returnData.salesmom * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.salesmom * 100).toFixed(decimals_num)) + "%" + down;
                        var salesYoy = returnData.salesyoy >= 0
                                ? fitNum((returnData.salesyoy * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.salesyoy * 100).toFixed(decimals_num)) + "%" + down;
                        var tcMom = returnData.tcmom >= 0
                                ? fitNum((returnData.tcmom * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.tcmom * 100).toFixed(decimals_num)) + "%" + down;
                        var tcYoy = returnData.tcyoy >= 0
                                ? fitNum((returnData.tcyoy * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.tcyoy * 100).toFixed(decimals_num)) + "%" + down;
                        var storeNumMom = returnData.storenomom >= 0
                                ? fitNum((returnData.storenomom * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.storenomom * 100).toFixed(decimals_num)) + "%" + down;
                        var storeNumYoy = returnData.storenoyoy >= 0
                                ? fitNum((returnData.storenoyoy * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.storenoyoy * 100).toFixed(decimals_num)) + "%" + down;
                        var storeTCMom = returnData.storetcmom >= 0
                                ? fitNum((returnData.storetcmom * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.storetcmom * 100).toFixed(decimals_num)) + "%" + down;
                        var storeTCYoy = returnData.storetcyoy >= 0
                                ? fitNum((returnData.storetcyoy * 100).toFixed(decimals_num)) + "%" + up
                                : fitNum((returnData.storetcyoy * 100).toFixed(decimals_num)) + "%" + down;
                        $("#sales_mom").html("环比增长：" + salesMom);
                        $("#sales_yoy").html("同比增长：" + salesYoy);
                        $("#tc_mom").html("环比增长：" + tcMom);
                        $("#tc_yoy").html("同比增长：" + tcYoy);
                        $("#store_num_mom").html("环比增长：" + storeNumMom);
                        $("#store_num_yoy").html("同比增长：" + storeNumYoy);
                        $("#store_tc_mom").html("环比增长：" + storeTCMom);
                        $("#store_tc_yoy").html("同比增长：" + storeTCYoy);
                        $("#sales").html(fitNum((returnData.sales*1).toFixed(decimals_num)));
                        $("#tc").html(fitNum((returnData.tc*1).toFixed(decimals_num)));
                        $("#store_num").html(fitNum((returnData.storeNo*1).toFixed(decimals_num)));
                        $("#store_tc").html(fitNum(parseInt(returnData.storetc*1).toFixed(decimals_num)));
                    }
                }
            });
        }

        //展开城市销售情况的表格
        function expandTable(index, $detail, cells, subRow) {
            buildTable1(index, $detail, cells, subRow);
        }

        //生成城市销售情况的表格
        function buildTable(brand_name, subcat_name, start_month, end_month) {

            $("#table_div").empty();
            $.ajax({
                type: "GET",
                url: "/service/data/get_brand_overview_result_by_city" +
                "?start_month=" + start_month + "&end_month=" + end_month
                + "&brand_name=" + encodeURIComponent(brand_name) + "&subcat_name=" + encodeURIComponent(subcat_name),
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            //母表数据（ajax返回结果,需排序）
                            rowData = res.data.cate;//格式：[['QSR','Total','1000','50'],[]]
                            //子表数据（ajax返回结果,需排序）
                            subRowData = res.data.subCate
                            //城市级别下拉框数据填充
                            getCityTierView(rowData,subRowData)
                            //初始化店铺销售汇总表格2（在表格一初始化后）
                            initCityShopTable()
                            //1.表头数据
                            var titles = ['城市级别', '城市',
                                '店铺数(家)', '客单数(万笔)', '客单数%', '店均客单数(笔)', '客单数增长率%',
                                '销售额(亿元)', '销售额占比%', '店均销售额(万元)', '销售额增长率%',
                                '客单价(元)'];
                            $("#table_div").buildTables({
                                "titles":titles,
                                "rowData":rowData,
                                "subRowData":subRowData,
                                "sortTitle":"店铺数(家)",
                                "desc":1,
                                "tooltip":false
                            });
                        } catch (e) {
                            console.info(e);
                        }
                    }
                }
            });
        }

        //设置城市销售情况的表格样式
        function initCityTableStyle() {
            //设置标题样式
            $("#compareplatform1 thead tr").css({
                //"background": "#ba1b20",
                //"color": "#ffffff"
                "border-bottom": "3px solid #ba1b20"
            })
            //设置表格的列 无边框initTableStyle
            $('#compareplatform1 thead').css({
                //"background": "#ba1b20",
                //"color": "#ffffff"
                "border-bottom": "3px solid #ba1b20"
            })
            $('#compareplatform1').css({
                "border-left": "none",
                "border-right": "none"
            });
            $('#compareplatform1 tr td').css({
                "border-left": "none",
                "border-right": "none"
            });
            $('#compareplatform1 tr th').css({
                "border-left": "none",
                "border-right": "none"
            });
        }


        $("#category_selector").change(function () {
            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var brandName = BRAND_SELECT.val();
            var category = $("#category_selector").val();
            buildProductTable(startMonth, endMonth, brandName,category);
        });

        //生成产品表格
        function buildProductTable(startMonth, endMonth, brandName,category) {
            $("#product_table").html("...请稍等");
            $.ajax({
                type: "GET",
                url: "/service/data/get_brand_overview_result_by_product",
                data:{
                    start_month:startMonth,
                    end_month:endMonth,
                    brand_name:brandName,
                    category:category
                },
                success: function (res) {
                    if (res.code === "suc") {
                        var productType = res.data.product_type;
                        var productList = res.data.product_list;
                        var html = "";
                        productType.forEach(function (value, index) {
                            var products = productList[value];
                            products.forEach(function (value2, index2) {
                                var brand = "";
                                if (index2 === 0) {
                                    brand = "<td rowspan='" + products.length + "' style='color:#cf3138;font-weight:bold'>" + value2.productType + "</td>";
                                }
                                var price = isNaN(parseFloat(value2.adjustedProductPrice).toFixed(decimals_num)) === false
                                        ? parseFloat(value2.adjustedProductPrice).toFixed(decimals_num) : "-";
                                var priceRange = isNaN(parseFloat(value2.priceRange).toFixed(decimals_num)) === false
                                        ? (parseFloat(value2.priceRange) * 100).toFixed(decimals_num) : "-";
                                var sales = isNaN(parseFloat(value2.productsales).toFixed(decimals_num)) === false
                                        ? parseFloat(value2.productsales).toFixed(decimals_num) : "-";
                                html = html + "<tr>" + brand +
                                        "<td>" + value2.productName + "</td>" +
                                        "<td>" + formatNum(price) + "</td>" +
                                        "<td>" + priceRange + "</td>" +
                                        "<td>" + formatNum(sales) + "</td>" +
                                        "</tr>"
                            })
                        });
                        $("#product_table").html(html);
                        $('#shopTableBody tr.odd').css({
                            'background-color':'#fff3f5'
                        })

                    }
                }
            });
        }

        $('#default-datatable').DataTable({
            //搜索框
            "searching": false,
            //是否排序
            "bSort": false,
            //是否显示每页显示数据大小
            "bLengthChange": false,
            //隐藏表格信息
            "bInfo": false

        });

        $('#default-datatable1').DataTable({
            //搜索框
            "searching": false,
            //是否排序
            "bSort": false,
            //是否显示每页显示数据大小
            "bLengthChange": false,
            //隐藏表格信息
            "bInfo": false

        });
        $('#shopTable').on( 'order.dt',  function () {
            $('.table-striped > tbody > tr').css({
                'background-color':'white'
            });
            $('.table-striped > tbody > tr:nth-of-type(odd)').css({
                'background-color':'#fff3f5'
            });
        })
        $("#tab-2_li").click(function () {
            //延时执行，防止resize无效
            setTimeout(function () {
                if (satisfaction_model != null) {
                    satisfaction_model.resize();
                }
                if (satisfaction_chart != null) {
                    satisfaction_chart.resize();
                }
                getWordCloud();
            }, "280");
        });
        //导航栏格式设置
        /*
        navigatorStyleInit()

        function navigatorStyleInit() {
            $('.nav-pills li').css({
                "padding": "0px 0px",
                "text-align": "center",
                "font-size": "18px",
                "border": " 1px #dadada solid",
                "width": "33.2%",
            })
            $('.nav-pills li a').css({
                "padding": "10px 0px"
            })
            $(".nav_body").css({
                "display": "none",
            })
            $(".nav_body1").css({
                "display": "",
            })

        };
        //导航栏点击事件
        $(".nav_info").click(function () {
            var nav_idx = $(this).attr("idx");
            //清空前一定要加载一遍词云图
            getWordCloud()
            $(".nav_body").css({
                "display": "none",
            })
            $(".nav_body" + nav_idx).css({
                "display": "",
            })
            $(this).parent().addClass("active")
            var other_li = $(this).parent().siblings();
            other_li.removeClass("active")
            satisfaction_chart.resize();
        });*/

        //城市级别
        function getCityTierView2() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_city_tier",
                success: function (res) {
                    if (res.code === "suc") {
                        var realData = res.data;
                        try {
                            realData.forEach(function (value, index) {
                                $(".cityTier_select").append("<option value='" + value.cityTierName + "'>"
                                        + value.cityTierRealName + "</option>");
                            });

                        } catch (e) {
                        }
                    }
                }
            });
        }

        //城市级别（更新）
        function getCityTierView(rowData,subRowData) {
            $(".cityTier_select").empty()
            var def_val = null
            for (var row in rowData) {
                if (def_val == null) {
                    def_val = row
                }
                $(".cityTier_select").append("<option value='" + rowData[row][0] + "'>"
                        + rowData[row][0] + "</option>");
            }
            ;
            //设置默认值
            $(".cityTier_select").val("Tier 1")
            getCityByTier("Tier 1",subRowData)
            $(".city_select1").val("上海")

        }


        //评论汇总  获取城市等级和城市名的级联关系
        getCityTierName()

        function getCityTierName() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_city_tier_name",
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            var cityTierList = returnData.city_tier;
                            CITY_TIER_NAME_LIST = returnData.city_tier_name;
                            $("#cityTier_select2").html("");
                            $("#city_select2").html("");
                            cityTierList.forEach(function (value, index) {
                                if (value.cityTierName === 'Tier 1') {
                                    $("#cityTier_select2").append("<option value='" + value.cityTierName + "' selected>"
                                            + value.cityTierRealName + "</option>");
                                } else {
                                    $("#cityTier_select2").append("<option value='" + value.cityTierName + "'>"
                                            + value.cityTierRealName + "</option>");
                                }
                            });
                            CITY_TIER_NAME_LIST.forEach(function (value, index) {
                                if (value.cityTier === 'Tier 1') {
                                    var prop = "";
                                    CITY_TIER_NAME_LIST.forEach(function (value1, index) {
                                        if (value1.cityTier !== 'all' && value1.cityName === value.cityName) {
                                            prop = value1.cityTier;
                                        }
                                    });
                                    if (value.cityName === '上海') {
                                        $("#city_select2").append("<option value='" + value.cityName + "' prop='" + prop + "' selected>"
                                                + value.cityName + "</option>");
                                    } else {
                                        $("#city_select2").append("<option value='" + value.cityName + "' prop='" + prop + "'>"
                                                + value.cityName + "</option>");
                                    }
                                }
                            });
                            //月满意度趋势(总体)
                            satisfactionChartInit()
                            //月满意度趋势(店铺) 表格
                            satisfactionTableInit()
                        } catch (e) {
                        }
                    }
                }
            });
        }
        //城市级别 城市级联
        $(".cityTier_select1").change(function () {
            var cityTier = $(this).val()
            var html = "";
//            if (cityTier.toLowerCase() === 'all') {
//                html = html + "<option value='all' prop='all'>所有城市</option>";
//            } else {
            CITY_TIER_NAME_LIST.forEach(function (value, index) {
                if (value.cityTier.toLowerCase() === cityTier.toLowerCase()) {
                    html = html + "<option value='" + value.cityName + "' prop='" + cityTier + "'>"
                            + value.cityName + "</option>"
                }
            });
//            }

            $(".city_select1").html(html);
        });
        //城市级别 城市级联
        $("#cityTier_select2").change(function () {
            var cityTier = $(this).val()
            var html = "";
//            if (cityTier.toLowerCase() === 'all') {
//                html = html + "<option value='all' prop='all'>所有城市</option>";
//            } else {
            CITY_TIER_NAME_LIST.forEach(function (value, index) {
                if (value.cityTier.toLowerCase() === cityTier.toLowerCase()) {
                    html = html + "<option value='" + value.cityName + "' prop='" + cityTier + "'>"
                            + value.cityName + "</option>"
                }
            });
//            }

            $("#city_select2").html(html);
            //月满意度趋势(总体)
            satisfactionChartInit();
            //月满意度趋势(店铺) 表格
            satisfactionTableInit()
        });
        $(".city_select2").change(function () {
            //月满意度趋势(总体)
            satisfactionChartInit();
            //月满意度趋势(店铺) 表格
            satisfactionTableInit()
            //词云图
            getWordCloud()
            //顾客反馈
            changeFeedback();

        })
        $("#satisfaction_sort_by").change(function () {
            //月满意度趋势(店铺) 表格
            satisfactionTableInit()
        })

        function getCityByTier(tier,subRowData) {
            var subRowData = window.subRowData
            if (subRowData != null) {
                $(".city_select1").empty()
                for (var tie in subRowData) {
                    if (tie == tier) {
                        for (var idx in subRowData[tie]) {
                            idx = new Number(idx)
                            var subrow = subRowData[tie][idx]
                            $(".city_select1").append("<option value='" + subrow[0] + "'>"
                                    + subrow[0] + "</option>");
                        }
                    }
                }
                ;
            }
        }


        //初始化店铺销售汇总表格2（在表格一初始化后）
        function initCityShopTable() {
            var startMonth = $("#start_date").val();
            var endDate = $("#end_date").val();
            var cateName = CATE_SELECT.val();
            var brandName = BRAND_SELECT.val();
            var cityTier = $(".cityTier_select1").val();
            var city = $(".city_select1").val();
            //获取表格数据
            getShopTable(startMonth, endDate, cateName, brandName, cityTier, city)
        }

        var brand_store_names;
        initCities();

        function changeFeedback() {
            var startMonth = $("#start_date").val();
            var endDate = $("#end_date").val();
            var brandName = BRAND_SELECT.val();
            var select_city = $("#city_select2").val();
            customer_feedback(startMonth, endDate, brandName, select_city)
        }


        function initCities() {
            var end_month = $("#end_date").val();
            var brand_name = $("#brand_select").val();
            $.get("/service/data/getBrandCityStoreName",
                    {
                        end_month: end_month,
                        brand_name: brand_name
                    }, function (data) {
                        if (data.code === "suc") {
                            var realData = data.data;
                            brand_store_names = realData;
                            var html = "";
                            var name_set = new Set();
                            for (var i = 0; i < realData.length; i++) {
                                name_set.add(realData[i]["city"]);
                            }
                            for (var key of name_set.keys()) {
                                html += "<option>" + key + "</option>";
                            }
                            $("#city_name").append(html);
                            //搜索下拉框
                            $("#city_name").chosen();
                            $(".chosen-single").css({
                                "height": "38px",
                                "background": "none"
                            })
                            $(".chosen-single span").css({
                                "margin-top": "5px"
                            })
                            $(".chosen-single div").css({
                                "margin-top": "5px"
                            })
                            $("#city_name_chosen").css({
                                "width": "76%"
                            })
                            initStoreNames();
                            changeFeedback();
                        }
                    });
        }

        // $("#city_name").change(function () {
        //     initStoreNames();
        //     changeFeedback();
        // });

        // $("#shop_name").change(function () {
        //     changeFeedback();
        // });

        function initStoreNames() {
            var city_name = $("#city_name").val();
            var html = "";
            for (var i = 0; i < brand_store_names.length; i++) {
                var city = brand_store_names[i]["city"];
                if (city == city_name) {
                    html += "<option>" + brand_store_names[i]["restaurantName"] + "</option>";
                }
            }
            $("#shop_name").empty();
            $("#shop_name").append(html);
        }


        //月满意度趋势(总体)
        function satisfactionChartInit() {
            satisfaction_chart = echarts.init(document.getElementById("satisfaction_chart"));
            var city = $("#city_select2").val()
            var endMonth = $("#end_date").val().replace("-", "");
            var brandName = BRAND_SELECT.val();
            $.ajax({
                type: "GET",
                url: "/service/data/getBrandMonthlyRatingTrend?city=" + city + "&end_month=" + endMonth
                + "&brandName=" + encodeURIComponent(brandName),
                success: function (res) {
                    if (res.code === "suc") {
                        var monthDatas = res.data;
                        var cate_data = [];
                        var month_list = [];
                        monthDatas.forEach(function (value, index) {
                            month_list[index] = new Number(value["yearmonth"]).toString()
                            cate_data[index] = formatNum(new Number(value["brandrating"]).toFixed(index_decimals_num))
                        })
                        var option = {
                            color: ['#ba1b20'],
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                x: 100
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: month_list,
                                name: "月份"
                            },
                            yAxis: {
                                type: 'value',
                                splitLine: false,
                                min:function(value) {
                                    return parseInt(value.min*0.8);
                                },
                                max: 100,
                                name: "满意度"
                            },
                            series: [
                                {
                                    name: '数值',
                                    type: 'line',
                                    data: cate_data,
                                    lineStyle: {
                                        width: 3
                                    }
                                }
                            ]
                        };

                        satisfaction_chart.clear();
                        satisfaction_chart.setOption(option, true);
                    }
                }
            });
        }

        //月满意度趋势(店铺) 表格
        function satisfactionTableInit() {
            var city = $("#city_select2").val()
            var endMonth = $("#end_date").val().replace("-", "");
            var startMonth = $("#start_date").val().replace("-", "");
            var brandName = BRAND_SELECT.val();
            var sortOrder = $("#satisfaction_sort_by").val();
            $.ajax({
                type: "GET",
                url: "/service/data/getBrandStoreRating?city=" + encodeURIComponent(city) +
                "&end_month=" + endMonth + "&start_month=" + startMonth +
                "&brandName=" + encodeURIComponent(brandName) +
                "&sortOrder=" + sortOrder,
                success: function (res) {
                    if (res.code === "suc") {
                        var monthDatas = res.data;
                        try {
                            $("#shop_satis_body").html("");
                            //销毁表格，便于之后重新生成数据
                            $('#shop_satis').DataTable().destroy();
                            var returnData = res.data;//格式[{},{},{}]
                            var html = "";
                            returnData.forEach(function (value, index) {
                                var v1 = "", v2 = "";
                                try {
                                    v1 = value.storeName;
                                } catch (e) {
                                }
                                try {
                                    v2 = formatNum(new Number(value.storeRating).toFixed(index_decimals_num));//2.客单数（笔）
                                } catch (e) {
                                }

                                html = html + ("<tr>" +
                                        "<td>" + getTooltipHtml("3_"+v1,true) + "</td>" +
                                        "<td>" + v2 + "</td>" +
                                        "</tr>");
                            });
                            $("#shop_satis_body").html(html);

                            var table = $('#shop_satis').DataTable({
                                //搜索框
                                "searching": false,
                                //是否排序
                                "bSort": false,
                                //是否显示每页显示数据大小
                                "bLengthChange": false,
                                //隐藏表格信息
                                "bInfo": false,

                                "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}],

                                "aaSorting": [[1, "desc"]]

                            });
                            $('#shop_satis').css({
                                "width": "100%",
                            })
                            $("#shop_satis_body tr a").css({
                                'color':'#cf3138',
                            });
                            $('#shop_satis_body tr.odd').css({
                                'background-color':'#fff3f5'
                            })
                            //去除分页
                            $('#shop_satis_wrapper div:nth-child(3)').empty()



                        } catch (e) {
                        }
                    }
                }
            });
        }

        //月满意度趋势(店铺) 模态框
        function satisfactionChart2Init() {
            satisfaction_model = echarts.init(document.getElementById("satisfaction_model"));
            var city = $("#city_select2").val()
            var endMonth = $("#end_date").val().replace("-", "");
            var brandName = BRAND_SELECT.val();
            var storeName = $('#myModalLabel').text().split("\n")[0]
            $.ajax({
                type: "GET",
                url: "/service/data/getBrandStoreRatingTrend?city=" + encodeURIComponent(city) +
                "&end_month=" + endMonth + "&brandName=" + encodeURIComponent(brandName) +
                "&storeName=" + storeName,
                success: function (res) {
                    if (res.code === "suc") {
                        var monthDatas = res.data;
                        var cate_data = [];
                        var month_list = [];
                        monthDatas.forEach(function (value, index) {
                            month_list[index] = value.yearmonth
                            cate_data[index] = formatNum(new Number(value.storeRating).toFixed(index_decimals_num))
                        })
                        var option = {
                            color: ['#ba1b20'],
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                x: 100
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: month_list,
                                name: "月份"
                            },
                            yAxis: {
                                type: 'value',
                                splitLine: false,
                                name: "满意度",
                                max:100,
                                min:function (value) {
                                    return parseInt(value.min*0.8);
                                }
                            },
                            series: [
                                {
                                    name: '数值',
                                    type: 'line',
                                    data: cate_data,
                                    lineStyle: {
                                        width: 3
                                    }
                                }
                            ]
                        };

                        satisfaction_model.clear();
                        satisfaction_model.setOption(option, true);
                    }
                }
            });


        }

        //提示点击查看月满意度趋势
        function getTooltipHtml(args,need_tip){
            if(need_tip==false&&args.split("_")[0]==1) {
                var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='color:#cf3138;font-weight:bold;'" +
                        ">" + args.split("_")[1]+ "</a>"
                return html
            }
            if(need_tip==false&&args.split("_")[0]==2){
                var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='color:#6a6c6f;font-weight:bold;'" +
                        ">" + args.split("_")[1]+ "</a>"
                return html
            }
            if(args.split("_")[0]==1||args.split("_")[0]==2) {
                var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='color:#cf3138;font-weight:bold;'" +
                        "data-toggle=\"tooltip\" " +
                        "title=\"点击查看过去十二个月的趋势\" " +
                        "onclick='showLastData(\"" + args.split("_")[1] + "\")'>" + args.split("_")[1] + "</a>"
                return html
            }else{
                var html = "<a href=\"javascript:void(0)\" class=\"cate_tooltip\" style='font-weight:bold;color:#6a6c6f'" +
                        "data-toggle=\"tooltip\" " +
                        "title=\"点击查看过去十二个月的趋势\" " +
                        "onclick='showLastData(\"" + args.split("_")[1] + "\")'>" + args.split("_")[1] + "</a>"
                return html
            }
        }

        //模态框打开后再渲染
        $('#myModal').on('shown.bs.modal', function () {
            satisfactionChart2Init()
        })

        //词云图
        function getWordCloud() {
            var city = $("#city_select2").val()
            var endMonth = $("#end_date").val().replace("-", "");
            var start_date = $("#start_date").val().replace("-", "");
            var brandName = BRAND_SELECT.val();
            $.ajax({
                type: "GET",
                url: "/service/data/getBrandKeyWord?city=" + encodeURIComponent(city) +
                "&end_month=" + endMonth + "&brandName=" + encodeURIComponent(brandName) +
                "&start_month=" + start_date,
                success: function (res) {
                    if (res.code === "suc") {
                        var monthDatas = res.data;
                        var words1 = [];//情感类
                        var words2 = [];
                        var idx1=0
                        var idx2=0
                        monthDatas.forEach(function (value, index) {
                            var word = {}
                            word["text"] = value.keyword
                            word["weight"] = value.wordCount
                            if(value.emotion!=null&&value.emotion==1){
                                words1[idx1++] = word
                            }else {
                                words2[idx2++] = word
                            }
                        })
                        $("#word_cloud1").empty()
                        $("#word_cloud1").jQCloud(words1);
                        $("#word_cloud2").empty()
                        $("#word_cloud2").jQCloud(words2);
                    }
                }
            });
        }

        //echarts画出的是canvas，窗口变动后需要重绘
        window.onresize = function () {
            if (satisfaction_model != null)
                satisfaction_model.resize();
            if (satisfaction_chart != null)
                satisfaction_chart.resize();
        }




    });

    //点击查看月满意度趋势(店铺)
    function showLastData(args) {
        var title=args;
        $('#myModalLabel').html(title + '\n月满意度趋势');

        $('#myModal').modal('show');
    }

    //店铺汇总，并生成表格
    function getShopTable(startMonth, endMonth, cateName, brandName, cityTier, cityname) {
        $('#shopTableBody').empty()
        $('#shopTableBody').append("数据加载中...")
        startMonth = startMonth.replace("-", "")
        endMonth = endMonth.replace("-", "")
        var url = "/service/data/getBrandOverviewResultbycitystore?start_month=" + startMonth + "&end_month=" + endMonth + ""
                + "&cityTier=" + encodeURIComponent(cityTier) + "&brandName=" + encodeURIComponent(brandName) + ""
                + "&cityname=" + encodeURIComponent(cityname) + "&subcat_name=" + encodeURIComponent(cateName) + ""
        $.ajax({
            type: "GET",
            url: url,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        $("#shopTableBody").html("");
                        //销毁表格，便于之后重新生成数据
                        $('#shopTable').DataTable().destroy();
                        var returnData = res.data;//格式[{},{},{}]
                        var html = "";
                        returnData.forEach(function (value, index) {
                            var v1 = "", v2 = "", v3 = "", v4 = "", v5 = "", v6 = "", v7 = "";
                            try {
                                v1 = value.restaurantName;
                            } catch (e) {
                            }
                            try {
                                v2 = formatNum(new Number(value.storeTC).toFixed(0));//2.客单数（笔）
                            } catch (e) {
                            }
                            try {
                                v3 = formatNum(convBill(value.storeValues, index_decimals_num).num);//3.销售额(万)
                            } catch (e) {
                            }
                            try {
                                v4 = formatNum(new Number(value.storeTA).toFixed(index_decimals_num));//4.客单价(元)
                            } catch (e) {
                            }
                            try {
                                v5 = (new Number(value.storeTCRate) * 100).toFixed(index_decimals_num);//5.客单数增长率（需要*100）
                            } catch (e) {
                            }
                            try {
                                v6 = formatNum(new Number(value.storeRating).toFixed(index_decimals_num));//6.店铺评分
                            } catch (e) {
                            }
                            try {
                                v7 = formatNum(new Number(value.deliverySpeed).toFixed(index_decimals_num));
                            } catch (e) {
                            }
                            html = html + ("<tr>" +
                                    "<td style='color:#cf3138;font-weight:bold'>" + v1 + "</td>" +
                                    "<td>" + v2 + "</td>" +
                                    "<td>" + v3 + "</td>" +
                                    "<td>" + v4 + "</td>" +
                                    "<td>" + v5 + "</td>" +
                                    "<td>" + v6 + "</td>" +
                                    "<td>" + v7 + "</td>" +
                                    "</tr>");
                        });
                        $("#shopTableBody").html(html);

                        var table = $('#shopTable').DataTable({
                            //搜索框
                            "searching": false,
                            //是否排序
                            "bSort": true,
                            //是否显示每页显示数据大小
                            "bLengthChange": false,
                            //隐藏表格信息
                            "bInfo": false,

                            "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}],

                            "aaSorting": [[1, "desc"]]

                        });
                        //只搜索第一列
                        $('#shopTable_filter > label > input').on('keyup', function () {
                            table.columns(0).search(this.value).draw();
                        });
                        //设置表头样式
                        $("#shopTable thead tr").css({
                            //"background": "#ba1b20",
                            //"color": "#ffffff"
                            "border-bottom": "3px solid #ba1b20"
                        })
                        //设置表格的列 无边框initTableStyle
                        $('#shopTable thead').css({
                            //"background": "#ba1b20",
                            //"color": "#ffffff"
                            "border-bottom": "3px solid #ba1b20"
                        })
                        $('#shopTable').css({
                            "width": "100%",
                        })
                    } catch (e) {
                    }
                }
            }
        });
        //热门品牌占表格标题样式设置
        $("#default-datatable thead tr").css({
            "background": "#ba1a20",
            "color": "#fff"
        })
    }
    //顾客反馈，并生成表格
    function customer_feedback(startMonth, endMonth, brandName, city) {
        startMonth = startMonth.replace("-", "")
        endMonth = endMonth.replace("-", "")
        var url = "/service/data/getBrandStoreCommentRatio?start_month=" + startMonth + "&end_month=" + endMonth + ""
                + "&brandName=" + encodeURIComponent(brandName) + ""
                + "&city=" + encodeURIComponent(city) + ""
        $.ajax({
            type: "GET",
            url: url,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        //母表数据（ajax返回结果,需排序）
                        rowData = res.data.cate;//格式：[['QSR','Total','1000','50'],[]]
                        // rowData =[["服务","121","22","33"],["食品","121","22","33"],["价格","121","22","33"]]
                        // //子表数据（ajax返回结果,需排序）
                        subRowData = res.data.subCate
                        // subRowData ={"服务":[["服务1","121","22","33"]],"食品":[["食品1","121","22","33"]],"价格":[["价格1","121","22","33"]]}
                        // //1.表头数据
                        var titles = ['', '讨论满意度占比',
                            '正面喜好度%', '同比增长趋势%'];
                        $("#customer_feedback").buildTables({
                            "titles":titles,
                            "rowData":rowData,
                            "subRowData":subRowData,
                            "sortTitle":"讨论满意度占比",
                            "desc":1,
                            "tooltip":false,
                            "association_col":0,
                            "child_first_space":false,
                            "expandCallBack":expand_call_back,
                            "scroll_title":false,
                        });
                        //顾客反馈 增长率箭头设置
                        initBackStyle();
                        //顾客反馈 满意度占比设置
                        initSatisStyle(null,null)

                    //     $("#customer_feedback_body").html("");
                    //     //销毁表格，便于之后重新生成数据
                    //     $('#customer_feedback').DataTable().destroy();
                    //     var value = res.data;//格式{}
                    //     var html = "";
                    //     var v1 = "",
                    //             v211 = "", v212 = "",
                    //             v221 = "", v222 = "",
                    //             v231 = "", v232 = "",
                    //             v3 = "", v4 = "";
                    //     //----------------------------------------1---服务-行-------------------------------------
                    //     v1 = "服务"
                    //     try {
                    //         v211 = formatNum((new Number(value.serviceBase_NPer) * 100).toFixed(index_decimals_num));//服务消极评论占比
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v212 = formatNum((new Number(value.serviceBase_PPer) * 100).toFixed(index_decimals_num));//积极
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v3 = formatNum((new Number(value.servicePSR) * 100).toFixed(index_decimals_num));//正面喜好度
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v4 = formatNum((new Number(value.servicePSRRate) * 100).toFixed(index_decimals_num));//服务正面喜好度同比
                    //     } catch (e) {
                    //     }
                    //     html = html + "<tr><td>" + v1 + "</td>" +
                    //             "<td><div id='container1' style=\"height:30px;width:180px;\"></div></td>" +
                    //             "<td>" + v3 + "</td>" +
                    //             "<td><i class=\"glyphicon glyphicon-arrow-up\" style=\"color: #21dd21\"/>" + v4 + "</td>"
                    //     //----------------------------------------2---食品-行-------------------------------------
                    //     v1 = "食品"
                    //     try {
                    //         v221 = formatNum((new Number(value.foodBase_NPer) * 100).toFixed(index_decimals_num));//食物消极评论占比
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v222 = formatNum((new Number(value.foodBase_PPer) * 100).toFixed(index_decimals_num));//积极
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v3 = formatNum((new Number(value.foodPSR) * 100).toFixed(index_decimals_num));//正面喜好度
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v4 = formatNum((new Number(value.foodPSRRate) * 100).toFixed(index_decimals_num));//食物正面喜好度同比
                    //     } catch (e) {
                    //     }
                    //     html = html + "<tr><td>" + v1 + "</td>" +
                    //             "<td><div id='container2' style=\"height:30px;width:180px;\"></div></td>" +
                    //             "<td>" + v3 + "</td>" +
                    //             "<td><i class=\"glyphicon glyphicon-arrow-up\" style=\"color: #21dd21\"/>" + v4 + "</td>"
                    //     //----------------------------------------3---价格-行-------------------------------------
                    //     v1 = "价格"
                    //     try {
                    //         v231 = formatNum((new Number(value.priceBase_NPer) * 100).toFixed(index_decimals_num));//价格消极评论占比
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v232 = formatNum((new Number(value.priceBase_PPer) * 100).toFixed(index_decimals_num));//积极
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v3 = formatNum((new Number(value.pricePSR) * 100).toFixed(index_decimals_num));//正面喜好度
                    //     } catch (e) {
                    //     }
                    //     try {
                    //         v4 = formatNum((new Number(value.pricePSRRate) * 100).toFixed(index_decimals_num));//价格正面喜好度同比
                    //     } catch (e) {
                    //     }
                    //     html = html + "<tr><td>" + v1 + "</td>" +
                    //             "<td><div id='container3' style=\"height:30px;width:180px;\"></div></td>" +
                    //             "<td>" + v3 + "</td>" +
                    //             "<td><i class=\"glyphicon glyphicon-arrow-up\" style=\"color: #21dd21\"/>" + v4 + "</td>"
                    //     $("#customer_feedback_body").html(html);
                    //     //占比条形图
                    //     getCustomerFeedback("container1", v212, v211);
                    //     getCustomerFeedback("container2", v222, v221);
                    //     getCustomerFeedback("container3", v232, v231);
                    //
                    //     var table = $('#customer_feedback').DataTable({
                    //         //搜索框
                    //         "searching": false,
                    //         //是否排序
                    //         "bSort": false,
                    //         "pagination": false,                   //是否显示分页（*）
                    //         //是否显示每页显示数据大小
                    //         "bLengthChange": false,
                    //         //隐藏表格信息
                    //         "bInfo": false,
                    //     });
                    //     $("#customer_feedback_paginate").empty()
                    //     var canvas = $('#container2 div canvas')[0];
                    //     var cxt = canvas.getContext('2d');
                    //     cxt.font = "oblique small-caps bold 4px Arial";
                    //     cxt.fillStyle = "blue";
                    } catch (e) {
                        console.info(e)
                    }
                }
            }
        });

    }
    //顾客反馈 表格回调函数
    function expand_call_back(index){
        //顾客反馈 增长率箭头设置
        initBackStyle();
        //顾客反馈 满意度占比设置
        initSatisStyle(index)
    }
    //顾客反馈 增长率箭头设置
    function initBackStyle(){
        var eles=$("#compareplatform_customer_feedback tr td:last-child")
        for(var i=0;i<eles.length;i++){
            var ele=eles[i]
            var text=ele.innerText
            var html=""
            if(text.indexOf("-")==-1){
                html="<i class=\"glyphicon glyphicon-arrow-up\" style=\"color: #21dd21\"/>"+text
            }else{
                html="<i class=\"glyphicon glyphicon-arrow-down\" style=\"color: #ff3300\"/>"+text
            }
            ele.innerText=""
            $(ele).html(html);
            $(ele).css({
                "text-align":"left",
                "padding-left":"10%"
            })
        }
    }
    //顾客反馈 满意度占比设置
    function initSatisStyle(index){
            var eles = null;
            if(index!=null){
                var trs= $("#compareplatform_customer_feedback tr.detail_"+index)
                var tds=[]
                for(var j=0;j<trs.length;j++){
                    var td=$(trs[j]).find("td:nth-child(2)");
                    tds.push(td[0])
                }
                eles=tds
            }else {
                eles = $("#compareplatform_customer_feedback tr td:nth-child(2)")
            }
            for (var i = 0; i < eles.length; i++) {
                var ele = eles[i]
                //根据第一列 获取积极,消极
                var query = ele.innerText
                var ny_text = ""
                for (var j = 0; j < window.rowData.length; j++) {
                    if (window.rowData[j][0] == query) {
                        ny_text = window.rowData[j][1]
                        break;
                    }
                }
                var parent = query.substring(0, 2);//暂时取前两个作为父类
                var child = window.subRowData[parent];
                if (ny_text == "" && child != null) {
                    for (var j = 0; j < child.length; j++) {
                        if (child[j][0] == query) {
                            ny_text = child[j][1]
                            break;
                        }
                    }
                }
                var ny = ny_text.split("/");
                var cont_id = ""
                if(index!=null) {
                    cont_id = "detail_" + index + "container_child_" + i
                }else {
                    cont_id = "container_parent_" + i
                }
                var html = "<div id='" + cont_id + "' style=\"height:30px;width:180px;\"></div>"
                $(ele).next().innerText = ""
                $(ele).next().html(html);
                getCustomerFeedback(cont_id, ny[1], ny[0]);// 积极,消极
            }
    }

    $("td").css("vertical-align", "middle")


    function getCustomerFeedback(div_id, positive, negative) {
        negative = 0 - negative;
        var dom = document.getElementById(div_id);
        var myChart = echarts.init(dom);
        var option = {
            grid: {
                left: '25%',
                right: '25%'
            },
            xAxis: [
                {
                    type: 'value',
                    show: false
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    show: true,
                }
            ],
            series: [
                {
                    type: 'bar',
                    stack: 'fix',
                    color: '#00af50',
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: function (data) {
                                var realData = data.data;
                                var rst = realData + "%";
                                return rst;
                            }

                        }
                    },
                    data: [positive],
                    barWidth: 35
                },
                {
                    type: 'bar',
                    stack: 'fix',
                    color: '#fe0000',
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            formatter: function (data) {
                                var realData = data.data;
                                var rst = realData + "%";
                                return rst;
                            }
                        }
                    },
                    data: [negative],
                    barWidth: 35
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    function getbrandnews(startMonth,endDate,brandName){
        $.ajax({
            type:"GET",
            url: "/service/data/getBrandNews?end_month=" + endDate + "&brand_name=" + brandName +
                    "&start_month=" + startMonth,
            success:function (res) {
                if(res.code==="suc"){
                    $("#news").html("");
                    $("#news2").html("");
                    var news = res.data;
                    var data = JSON.stringify(news);
                    if(data == "[]"){
                        document.getElementById("hot_news").style.display ="none";
                    }else{
                        document.getElementById("hot_news").style.display ="";
                        news.forEach(function (val,index) {
                            if((index%2)===1){
                                $("#news").append("<div class=\"search-result\"><h5><a href=\""+val.url+"\" class=\"_fz_md\" style=\"color: #ba1b20\" target=\"_blank\">"+val.title+"</a></h5>" +
                                        "<p>发布时间："+val.date+" 来源："+val.source+"</p></div>");
                            }else{
                                $("#news2").append("<div class=\"search-result\"><h5><a href=\""+val.url+"\" class=\"_fz_md\" style=\"color: #ba1b20\" target=\"_blank\">"+val.title+"</a></h5>" +
                                        "<p>发布时间："+val.date+" 来源："+val.source+"</p></div>");
                            }
                        });
                    }

                }
            }
        });
    }

</script>
<script type="text/javascript" src='../res/myassets/js/sorttable.js'></script>
</body>

</html>